<template>
  <div class="homewrap">
    <div class="left">
      <el-col :span="15">
        <el-menu active-text-color="#ffd04b"
                 background-color="#545c64"
                 class="el-menu-vertical-demo"
                 default-active="/home/userman"
                 router
                 text-color="#fff"
                 @open="handleOpen"
                 @close="handleClose">
          <el-menu-item index="/home/userman">
            <el-icon>
              <icon-menu />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/home/message">
            <el-icon>
              <document />
            </el-icon>
            <span>留言管理</span>
          </el-menu-item>
          <el-menu-item index="/home/essay">
            <el-icon>
              <setting />
            </el-icon>
            <span>文章管理</span>
          </el-menu-item>
          <el-menu-item index="/home/label">
            <el-icon>
              <setting />
            </el-icon>
            <span>标签管理</span>
          </el-menu-item>
          <el-menu-item index="/home/review">
            <el-icon>
              <setting />
            </el-icon>
            <span>文章审核</span>
          </el-menu-item>
          <el-menu-item>
            <span @click="$router.push('/login')">退出</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="right">
      <div class="top">
        <el-card class="box-card">
          <el-icon>
            <Briefcase />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{bread}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
      </div>
      <div class="content">
        <el-card style="max-height:600px;overflow:auto">
          <router-view></router-view>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Setting,
  Briefcase,
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  name: 'v-home',
  components: {
    Document,
    IconMenu,
    Setting,
    Briefcase,
  },
  setup() {
    // onMounted(() => {
    //   var ws = new WebSocket('ws://localhost:8000/ws/push')

    //   ws.onopen = function (mevt) {
    //     console.log('客户端已连接')
    //   }
    //   ws.onmessage = function (mevt) {
    //     console.log('客户端收到消息: ' + mevt.data)
    //     ws.send('客服端发的消息')
    //     ws.close()
    //   }
    //   ws.onclose = function (mevt) {
    //     console.log('连接关闭')
    //   }
    // })

    const bread = ref<string>('')
    //根据路径改变面包屑
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const dir: any = {
      '/home/userman': '用户管理',
      '/home/label': '标签管理',
      '/home/essay': '文章管理',
      '/home/message': '留言管理',
      '/home/review': '文章审核',
    }
    const route = useRoute()
    watch(
      () => route.path,
      () => {
        bread.value = dir[route.path]
      },
      { immediate: true }
    )

    return { bread }
  },
})
</script>

<style scoped lang="less">
.homewrap {
  margin-left: 100px;
}
:deep(.el-col) {
  ul {
    height: 500px;
    width: 250px;
  }
}
.left {
  width: 300px;
  margin-top: 40px;
}
.right {
  flex: 0.8;
  margin-top: 20px;
  :deep(.box-card) {
    .el-card__body {
      display: flex;
    }
    .el-breadcrumb {
      margin-left: 50px;
    }
    width: 100%;
  }
  .content {
    margin-top: 50px;
  }
}
.homewrap {
  display: flex;
}
</style>